import React, {Component} from "react";
import { Divider} from "antd";
import * as echarts from 'echarts';
import ecStat from 'echarts-stat';
import getData from '../../compontens/GetData/getData.jsx'; 

export default class Plots extends React.Component{
    constructor(props){
        super(props);
        this.state = {
          columns:[],
          dataSource:[],
      };
    }
    
    get_data = (file_Name) => {
        getData(file_Name)
        .then(result => {
          this.getPlotsData(result)
        })
        .catch(error => {
          console.log(error);
          alert('Error');
        });
    };

    getPlotsData = (data) => {
      const rows = data.split('\n');
      if(rows[rows.length-1] === ''){
        rows.pop();
      }
      const columnData = [];
      for (let i = 1; i < rows.length; i++) {
        const rowData = rows[i].split('\t');
        for (let j = 1; j < rowData.length; j++) {
          const temp = [i-1, j-1, Number(rowData[j])];
          columnData.push(temp);
        }
      }
      this.BarItem(this.state.xAxisData, columnData);
    }

    BarItem = (xAxisData, columnData ) => {
      var chartDom = document.getElementById('Plots');
      this.myChart = echarts.init(chartDom);
      echarts.registerTransform(ecStat.transform.clustering);
        // prettier-ignore
        const data = columnData
            .map(function (item) {
            return [item[1], item[0], item[2] || '-'];
        });
        var option = {

        backgroundColor: 'white', 
        tooltip: {
            position: 'top'
        },
        grid: {
            height: '50%',
            top: '10%'
        },
        xAxis: {
            type: 'category',
            data: xAxisData,
            splitArea: {
            show: true
            }
        },
        yAxis: {
            type: 'category',
            data: xAxisData,
            splitArea: {
            show: true
            }
        },
        visualMap: {
            min: 0,
            max: 1,
            calculable: true,
            orient: 'horizontal',
            left: 'center',
            bottom: '15%'
        },
        series: [
            {
            name: 'Punch Card',
            type: 'heatmap',
            data: data,
            label: {
                show: true
            },
            emphasis: {
                itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
            }
        ]
        };
      this.myChart.setOption(option);
    }

    componentDidMount() {
      // const kra_result = localStorage.getItem('kra_result');
      const kra_result =  {
        "IDList": ["M0018C_2_month", "M0018C_1_month", "M0018C_3_month", "M0018C_14_day", "M0018C_birth", "M0018M_3_month", "M0018M_gest", "M0018M_birth"],
        "kra_path": "data/Result/1/Kraken_result",
        "result_path": "data/Result/1",
        "sankey_path": "data/Result/1/sankey",
        "krona_path": "data/Result/1/Krona_result",
        "classification_path": "data/Result/1/classification",
        "diversity_path": "data/Result/1/diversity"
      }
      if(!kra_result){
        return;
      }
      this.setState({
        kra_result: kra_result,
        xAxisData: kra_result.IDList,
      })
      const file_Name = kra_result.diversity_path + '/beta.tsv';
      this.get_data(file_Name);
    }

  render(){
        return(
          <>
          <Divider orientation="left">Bray-Curtis Heatmap</Divider>   
          <div className='w100 h100' id='Plots'></div>
         
          </>

           
        )
    }
    
}